<template>
  <!-- 社区界面 -->
  <div class="community-container" v-if="props.mode == 1">
   <div class="title-container">
      <h1 class="title1">学习社区</h1>
      <h1 class="title2">Learning Community</h1>
    </div>
    <div class="search-container">
    <img
      :src="searchicon"
      alt="search icon"
      class="search-icon"
      @click="onSearch"
    />
    <input
      type="text"
      v-model="message"
      @input="onSearch"
      class="search-input"
      placeholder="搜索"
    />
  </div>
    <CommunityList
      class="community-list"
      :postVos="postData"
      v-if="postData.length > 0"
      @refresh="onSearch"
      @load-more="loadMore"
    />
    
  </div>
  
  <!-- 发布界面 -->
  <CommunityPost v-if="props.mode == 2"/>

  <!-- 我的帖子界面 -->
  <CommunityMyPost v-if="props.mode == 3"/>
</template>

<script setup>
import { searchPost } from '@/api/CommunityApi'
import { ref, onMounted } from 'vue'
import CommunityList from '@/views/home/community/CommunityList.vue'
import CommunityPost from '@/views/home/community/CommunityPost.vue'
import CommunityMyPost from '@/views/home/community/CommunityMyPost.vue'
import searchicon from '@/assets/community/selectIcon.png'

const postData = ref([])
const message = ref('')
const currentPage = ref(1)
const pageSize = 12
const hasMore = ref(true)

const fetchData = async () => {
  try {
    const res = await searchPost(message.value,currentPage.value, pageSize)
    const newPosts = res.data.data.postVos || []
    hasMore.value = newPosts.length === pageSize

    // 合并数据
    if (currentPage.value === 1) {
      postData.value = newPosts
    } else {
      postData.value.push(...newPosts)
    }
  } catch (error) {
    console.error('数据获取失败:', error)
  }
}

onMounted(() => {
  fetchData()
})

const onSearch = async () => {
  currentPage.value = 1
  postData.value = []
  fetchData()
}

const loadMore = () => {
  if (hasMore.value) {
    currentPage.value++
    fetchData()
  }
}

const props = defineProps({
  mode: {
    type: Number,
    default: 1
  }
})
</script>

<style>
.title-container
{
text-align: center;
font-family: SimSun;
color:#746046;
}

.title1
{
  position: relative;
  top: 41px;
  margin-top: 0%;
}

.title2
{
  position: relative;
  top: 25px;
  margin-top: 0%;
}

.community-container
{
  --offset-x: 162px;
  --offset-x: 0px;
  --offset-y: 68px;
  background-image: url('/src/assets/community/BG.png');
  background-position: calc(-1 * var(--offset-x, 0px)) calc(-1 * var(--offset-y, 0px));
  height:-webkit-fill-available;
}

.search-container {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 0;
}

.search-icon {
  width: 56px;
  height: 56px;
  margin-right: 20px;
  cursor: pointer;
}

.search-input {
  width: 420px;
  height: 56px;
  padding: 8px 12px;
  font-size: 20px;
  border: none;
  outline: none;
  background-image: url('@/assets/community/SearchBox.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  background-color: transparent;
  color:#c3b5a4;
}

.search-input::placeholder {
  color: #c3b5a4;
  font-size: 20px;
}
</style>
